<template>
	<view class="page">
		<nav-header title="详细信息" :show-right="false">
		</nav-header>

		<view class="content" v-if="billDetails">
			<view class="item">
				<text>申请日期: {{ _formatTimestamp(billDetails.applyDate) }}</text>
			</view>
			<view class="item">
				<text>申请ID: {{ billDetails.applyId }}</text>
			</view>
			<view class="item">
				<text>联系人: {{ billDetails.contact }}</text>
			</view>
			<view class="item">
				<text>电话: {{ billDetails.phone }}</text>
			</view>
			<view class="item">
				<text>申请组名字: {{ billDetails.followGroupDetail.name }}</text>
			</view>
			<view class="item">
				<text>领导组名字: {{ billDetails.leaderGroupDetail.name }}</text>
			</view>

			<view class="item">
				<text>流量率: {{ billDetails.trafficRate }}%</text>
			</view>
			<view class="item">
				<text>交易佣金: {{ billDetails.transactionCommission }}%</text>
			</view>
		</view>

		<view class="status-container">
			<text class="status-text">{{statusText}}</text>
		</view>

		<view v-if="billDetails.status === 0 && isAdmin" class="button-container">
			<button class="button" @tap="agree">同意</button>
			<button class="button" @tap="">拒绝</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 0,
				list1: [{
					title: '待审核'
				}, {
					title: '已审核'
				}],
				billDetails: {},
				isApply: null,
				groupId: null,
				isAdmin: false
			}
		},
		methods: {
			agree() {
				this.$http({
					url: `/group/approveRelateGroup`,
					data: this.billDetails,
					method: "POST"
				}).then(res => {
					uni.showToast({
						title: '审核通过',
						icon: 'success',
						duration: 1000 // 设置显示时长为 3000 毫秒
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1000);
				})
			},
			_getData(id) {
				const that = this
				const userId = this.userStore.userInfo.id

				this.$http({
					url: `/systemMessage/findMessageDetailById?id=${id}`,
					method: "GET"
				}).then(res => {
					const item = res.messageDetail
					this.groupId = item.leaderGroup
					console.log("item.leaderGroup", item.leaderGroup)
					this.billDetails = item
					if (userId === item.applyId) {
						this.isApply = true
					}
					// 判断是否是管理员
					return this._checkAdmin(this.groupId, userId);
				}).then(isAdmin => {
					this.isAdmin = isAdmin;
				}).catch(error => {
					console.error("Error fetching data:", error);
				});
			},
			// 检查是否是管理员
			_checkAdmin(groupId, userId) {
				return this.$http({
					url: `/group/findOwnerAdminByGroupId?groupId=${groupId}`,
					method: "POST"
				}).then(res => {
					console.log("userid", userId)
					const isAdmin = res.find(group => {
						return group.id === userId
					});
					return Boolean(isAdmin);
				}).catch(error => {
					console.error("Error checking admin status:", error);
					return false;
				});
			},
			_formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		computed: {
			statusText() {
				switch (this.billDetails.status) {
					case 0:
						return '待审核';
					case 1:
						return '已审核';
					case 2:
						return '未通过';
					default:
						return '';
				}
			}
		},
		onLoad(options) {
			const id = options.id
			this._getData(id)
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20px;
	}

	.item {
		margin-bottom: 10px;
	}

	.item text {
		font-size: 16px;
	}

	.status-container {
		padding: 10px 20px;
		background-color: #f0f0f0;
		border: 1px solid #ddd;
		border-radius: 5px;
		margin-bottom: 10px;
		display: inline-block;
		margin: 0 20px;
	}

	.status-text {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}


	.button-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 水平分布按钮 */
		align-items: center;
		/* 垂直居中对齐 */
		padding: 20rpx;
		/* 内边距，可以根据需要调整 */
	}

	.button {
		flex: 1;
		/* 使按钮占据相等的空间 */
		margin: 0 10rpx;
		/* 按钮之间的间距 */
		background-color: #1aad19;
		/* 按钮背景色，可以根据需要调整 */
		color: white;
		/* 按钮文字颜色，可以根据需要调整 */
		border: none;
		/* 去掉边框 */
		border-radius: 8rpx;
		/* 圆角 */
		font-size: 32rpx;
		/* 字体大小，可以根据需要调整 */
	}

	.button:first-child {
		background-color: #1aad19;
		/* 同意按钮的背景色 */
	}

	.button:last-child {
		background-color: #dd524d;
		/* 拒绝按钮的背景色 */
	}
</style>